<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header-view">
        <div class="header-title"></div>
        <div class="header-content">
          <p style="font-size:33px;letter-spacing: 15px;">停车位管理系统</p>
          <!--<p style="font-size:12px;">{{time}}</p>-->
        </div>
        <div class="header-footer"></div>
    </div>
    <!-- 左侧区域 -->
    <div>
    <!-- 主题内容 -->
    <div class="main-view">
      <div class="main-view-left">
        <div class="main-view-left-top">
          <titleLeft></titleLeft>
          <!-- <alarm-left></alarm-left>
          <alarmStatistics></alarmStatistics>-->
          <div style="height:250px;text-align:center;lineHeight:250px">
          统计</div>
          <TitleView title="普通车辆统计"></TitleView>
          <oilWarning></oilWarning>
          <TitleView title="危化品车辆统计" style="margin-top:30px"></TitleView>
          <oilWarning></oilWarning>
        </div>
        <div class="main-view-left-bottom">
          <TitleView title="危化品车预警处置"></TitleView>
          <oilWarning></oilWarning>
          <!--<alarmStatistics></alarmStatistics>-->
          <!-- <threePieView/>-->
          <!-- <div style="height: 90%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;">
            <img src="./assets/img/3d.png" style="height:200px;width:200px;"/>
          </div>-->
        </div> 
      </div>
      <div class="main-view-center">
        <div class="main-view-center-top">
          <contentVideo></contentVideo>
        </div>
        <div class="main-view-center-bottom">
          <TitleView title="告警处置详情"></TitleView>
          <HistoricalList></HistoricalList>
        </div>
      </div>
      <div class="main-view-right">
        <div class="main-view-right-top">
          <TitleView style="width:calc(100% - 40px);text-align:left;" title="违停车辆调动提醒"></TitleView>
          <oilWarning></oilWarning>
        </div>
        <div class="main-view-right-center">
          <TitleView style="width:calc(100% - 40px);text-align:left;padding-right:40px;" title="偷油预警告警"></TitleView>
          <oilWarning></oilWarning>
        </div>
        <div class="main-view-right-bottom">
          <TitleView style="width:calc(100% - 40px);text-align:left;padding-right:40px;" title="新能源车位管理"></TitleView>
           <HistoricalList></HistoricalList>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import * as echarts from "echarts";
import pieComponent from './components/pieComponent.vue'
import alarmLeft from './components/alarmLeft.vue'//报警信息
import lineComponent from "./components/lineComponent.vue";
import RadarchartComponent from "./components/RadarchartComponent.vue";//服务满意度
import ParkingInformation from '@/components/ParkingInformation'//车位信息汇总
import HistoricalList from '@/components/HistoricalList'//历史记录
import TitleView from './components/TitleView.vue'//通用标题
import threePieView from './components/threePieView'//通用标题

import alarmStatistics from "./components/tableView/alarmStatistics" //左一 告警信息统计
import contentVideo from "./components/tableView/contentVideo" //中一 实时视频
import oilWarning from "./components/tableView/oilWarning" //右二 偷油预警

import titleLeft from "./components/titleSvg/titleLeft" //右二 偷油预警

import aa from "./components/tableView/aa" //右二 偷油预警


// import moment from 'moment';
export default {
  name: "App",
  components: {
    threePieView,
    lineComponent,
    alarmLeft,
    RadarchartComponent,
    ParkingInformation,
    HistoricalList,
    TitleView,
    pieComponent,

    alarmStatistics,
    contentVideo,
    oilWarning,
    aa,
    titleLeft
  },
  mounted() {
    // this.getTime()
    setInterval(this.updateTime, 1000);
    
  },
  methods: {
     updateTime() {
      const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    this.time = currentTime
}

// 每秒更新一次时间
  },
  data() {
    return {
      time:"",
      option: {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],  // 颜色
          title: {
          text: "Gradient Stacked Area Chart",
        },  // 标题名字
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
    textStyle: {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'] // Set legend text color array
    }
  },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: "Line 2",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: "Line 3",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: "Line 4",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: "Line 5",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      },
      // line配置项木
      lineClass: "main", // 线形状id
    };
  },
};
</script>

<style>
#app {
  width: 100%;
  height: 100vh;
  /* 设置背景图片为指定路径下的图片 */
  background-image: url('./assets/bg.png');
  color: #fff;

  /* 使背景图片铺满整个元素 */
  background-size: cover;
}
#app .header-view{
  height:76px;
  width: 100%;
  /*background-color: #000000;
  opacity: 0.5;*/
  position: relative;
  display: flex;
  justify-content: center;
}
.header-view .header-title{
  height:40px;
  width: 100%;
  background: linear-gradient(#022346, #2B579A);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}
.header-content{
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 100;
  text-align: center;
  transform: translateX(-50%);
}
.header-footer{
  width: 30%;
  height: 40px;
  opacity: 0.5;
  position: absolute;
  top: 40px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #2B579A;
}
.main-view{
  height:calc( 100vh - 76px);
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-view-left{
  height: 100%;
  width: calc(25% - 40px);
}
.main-view-left-top{
  height: calc( 70%);
  width: 100%;
 
}
.main-view-left-bottom{
  height: calc( 30% - 40px);
  width: calc( 100% - 80px);
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position: 0px 0px; /* 水平和垂直偏移量 */
  padding-left:40px;
}
.main-view .main-view-center{
   
    height: calc(100% - 10px);
    width: 50%;
    padding:0px 10px;
    padding-bottom: 10px;
}
.main-view-center-top{
  margin:50px;
  width:calc(100% - 100px) ;
  height:calc(40% + 100px) ;
}
/* .main-view-center-bottom{
  overflow: auto;
  height: 60%;
  width: 100%;
} */

.main-view-center-bottom {
  overflow: auto;
  margin-top:150px;
  padding-left: 50px;
  width:calc(100% - 100px) ;
  height:calc(60% - 200px) ;
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
 
  /* scrollbar-width: thin; For Firefox */
  /* scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0); */
   /* For Firefox */

  /* WebKit-based browsers */
}

/* Customize scrollbar for WebKit-based browsers */
.main-view-center-bottom::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

/* Track */
.main-view-center-bottom::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* Set the background color of the track */
}

/* Handle */
.main-view-center-bottom::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5); /* Set the color of the scrollbar handle */
  border-radius: 5px; /* Add rounded corners to the scrollbar handle */
}

.main-view .main-view-right{
    height: 100%;
    width: calc(25% - 40px);
}
.main-view-right-top, .main-view-right-center, .main-view-right-bottom{
  width: calc(100% - 40px);
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position:0px 0px; /* 水平和垂直偏移量 */
  padding-left:40px;
}
.main-view-right-top{
  height:calc( (100% / 3) - 110px);
}
.main-view-right-center, .main-view-right-bottom{
  height:calc( (100% - ((100% / 3) - 110px)) / 2 - 40px);
  margin-top:10px;
}
</style>
